<div class="form-designer-container-9136076486841527">
  <div class="content">
    <aside class="left">
      <nz-collapse>
        <nz-collapse-panel
          [nzHeader]="'基础组件'"
          [nzActive]="true"
        >
          <app-collapse-item-list
            [fields]="basicArray"
            (generateKey)="generateKey($event.list, $event.index)"
            (handleStart)="handleStart($event)"
          ></app-collapse-item-list>
        </nz-collapse-panel>
        <nz-collapse-panel [nzHeader]="'布局组件'" [nzActive]="true">
          <app-collapse-item-list
            [fields]="layoutArray"
            (generateKey)="generateKey($event.list, $event.index)"
            (handleStart)="handleStart($event)"
          ></app-collapse-item-list>
        </nz-collapse-panel>
      </nz-collapse>
    </aside>
    <section>
      <app-design-form-component-panel
        [data]="data"
        [selectItem]="selectItem"
        [startType]="startType"
        (handleSetSelectItem)="handleSetSelectItem($event)"
      ></app-design-form-component-panel>
    </section>
    <aside class="right">
      <nz-tabset [(nzSelectedIndex)]="activeKey">
        <nz-tab nzTitle="表单属性">
          <app-design-form-properties
            [config]="data.config"
          ></app-design-form-properties>
        </nz-tab>
        <nz-tab nzTitle="控件属性">
          <app-design-form-item-properties
            [selectItem]="selectItem"
            [attrLists]="attrLists"
            [config]="data.config"
          ></app-design-form-item-properties>
        </nz-tab>
      </nz-tabset>
    </aside>
  </div>
</div>
